<template>
  <el-card class="box-card defaultTable">
    <el-table v-loading="loading" :data="d.tableData" style="width: 100%">
      <el-table-column prop="id" label="ID" />
      <el-table-column prop="label" label="标签名" />
      <el-table-column prop="createtime" label="创建时间" />
      <el-table-column label="操作" align="right">
        <template #default="scope">
          <div class="dflex justify-content-end">
            <!-- <div class="base-edit" @click="onEdit(scope.row)">
              <img :src="edit" alt="" srcset="">
            </div> -->
            <div class="base-del" @click="onDel(scope.row.id)">
              <img :src="del" alt="" srcset="" />
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column type="expand">
        <template #default="props">
          <el-table class="expand-table" :show-header="false" :data="props.row.label_list">
            <el-table-column prop="id" label="ID" />
            <el-table-column prop="label" label="标签名" />
            <el-table-column prop="createtime" label="创建时间" />
            <el-table-column label="操作" align="right">
              <template #default="scope">
                <div class="dflex justify-content-end">
                  <div class="base-del mr48" @click="onDel(scope.row.id)">
                    <img :src="del" alt="" srcset="" />
                  </div>
                </div>
              </template>
            </el-table-column>
            <el-table-column width="48px"
          /></el-table>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      class="justify-content-end p10_0"
      :layout="paginationData.layout"
      :page-sizes="paginationData.pageSizes"
      :total="paginationData.total"
      :page-size="paginationData.pageSize"
      :currentPage="paginationData.currentPage"
      @current-change="handleCurrentChange"
    />
  </el-card>
  <!-- 编辑弹出 -->
  <DialogSpeechModel
    v-if="visible"
    :visible="visible"
    type="edit"
    :editData="editData"
    @editDpData="editDpData"
    @close="visible = false"
  />
</template>

<script lang="ts" setup>
import del from "@/assets/docs/del.svg"
// import edit from "@/assets/docs/edit.svg";
import { APILabelDel, APILabelList } from "@/api/apiSetting"
import DialogSpeechModel from "@/components/Create/components/dialogSpeechModel.vue"
import { usePagination } from "@/hooks/usePagination"
import debounce from "@/utils/debounce"
import dayjs from "dayjs"
import { ElMessage, ElMessageBox } from "element-plus"
import Pubsub from "pubsub-js"
import { onMounted, reactive, ref, watch } from "vue"

const loading = ref<boolean>(false)
const pid = ref("")
const editData = ref({})
const visible = ref<boolean>(false)

const d = reactive<any>({
  tableData: [],
  paginationData: {
    total: 0,
    currentPage: 1,
    pageSize: 20
  }
})

const { paginationData, handleCurrentChange } = usePagination(d.paginationData)
// 监听分页
watch(
  () => paginationData.currentPage,
  () => {
    initModel()
  }
)

// 初始化
const initModel = async () => {
  loading.value = true
  const params = {
    page: paginationData.currentPage
  }
  const { data, code } = await APILabelList(params)
  if (code !== 200) return
  paginationData.total = data.count
  d.tableData = data.list.map((item: any) => {
    item.createtime = dayjs.unix(item.createtime).format("YYYY-MM-DD HH:mm:ss")
    return item
  })
  loading.value = false
}

onMounted(() => {
  initModel()
  //消息订阅
  pid.value = Pubsub.subscribe("UPDATETAGSLLIST", () => initModel())
})

// const delFn = (p: number) => {
//   let newList = d.tableData.filter(e => e.id !== p)
//   d.tableData = newList
// }
const onDel = debounce((id: number) => {
  ElMessageBox.confirm("标签将永久删除，请谨慎操作！是否继续删除？", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning"
  }).then(async () => {
    const { code } = await APILabelDel({ id })
    if (code === 200) {
      // delFn(id)
      initModel()
      ElMessage({
        type: "success",
        message: "删除成功"
      })
    }
  })
}, 300)

// 编辑回显
const editDpData = (p: any) => {
  console.log(p)
  d.tableData = d.tableData.map((item) => {
    if (item.id === p.id) {
      item = p
    }
    return item
  })
  // 关闭编辑
  visible.value = false
}
</script>
<style lang="scss" scoped>
.expand-table {
  background: #f5f7fa;
  // :deep(.el-table__cell) {
  //   // padding-right: 48px;
  // }
}

.el-card {
  box-shadow: none;
  border: none;

  .base-edit {
    margin-right: 20px;
    cursor: pointer;
  }

  .f14333 {
    margin: 0 10px;
  }
}
</style>
